<template>
	<div class="nav">
		<div class="nav_box">
			<div class="nav_item nav_box_item" @mouseover="navOver(item,index)" @mouseout="navOut(item,index)" v-for="(item,index) in navList" :key="index">
				<nuxt-link :to="item.link">
					<div class="nav_box_item_name">
						<span class="nav_box_name">{{item.name}}</span>
						<div class="nav_box_arrow fa fa-caret-down transition_6" v-if="item.type!=='normal'"></div>
					</div>
				</nuxt-link>
				<transition name="slide-fade">
					<div class="nav_more" v-if="item.type=='more'" v-show="curIndex==index">
						<div class="nav_more_nav">
							<div class="nav_more_nav_item transition_6" v-for="(mitem,mindex) in item.children" :key="mindex" :class="{'nav_more_nav_item_active':curMoreIndex==mindex}" @mouseover="navMoreOver(mitem,mindex)" @mouseout="navMoreOut(mitem,mindex)">{{mitem.name}}</div>
						</div>
						<div class="nav_more_content">
							<div class="nav_more_content_section" v-for="(areaitem,areaindex) in curMoreData" :key="areaindex">
								<div class="nav_more_content_title">{{areaitem.title}}</div>
								<div class="nav_more_content_box">
									<a :href="acitem.link" class="nav_more_content_item transition_6" v-for="(acitem,acindex) in areaitem.children" :key="acindex">
										<div class="nav_more_content_icon" :style="'background-image:url('+acitem.icon+');'"></div>
										<div class="nav_more_content_name">{{acitem.main}}<span>/QC</span></div>
										<div class="nav_more_content_chart fa fa-line-chart"></div>
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="nav_down" v-if="item.type=='down'" v-show="curIndex==index">
						<a :href="ditem.link" class="nav_down_item transition_6" v-for="(ditem,dindex) in item.children" :key="dindex">{{ditem.name}}</a>
					</div>
				</transition>
			</div>
		</div>
		<div class="sign">
			<nuxt-link :to="{name:'login',query:{userId:'signin'}}"><div class="nav_item sign_item">登录</div></nuxt-link>
			<nuxt-link to="/login"><div class="nav_item sign_item">注册</div></nuxt-link>
		</div>
		<div class="nav_item language" @mouseover="languageOver" @mouseout="languageOut">
			<div class="language_name">
				<span>中文</span>
				<div class="language_icon fa fa-angle-down transition_6"></div>
			</div>
			<transition name="slide-fade">
				<div class="language_list" v-show="isLanguage">
					<div class="language_list_item">中文</div>
					<div class="language_list_item">English</div>
					<div class="language_list_item">Español</div>
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
import nav from '../assets/js/navSimple'

export default {
  data(){
  	return{
  		navList:nav,
  		curIndex:'',//当前导航控制
  		curMoreIndex:0,//当前more类型导航title切换，默认展示第一个
  		curMoreData:'',//当前more类型要展示的数据
  		isLanguage:false,
  	}
  },
  methods:{
  	navOver(item,index){
  		if(item.type=='more'){
  			if(!this.curMoreData){
  				this.curMoreData = item.children[0].children;
  			}
  			this.curIndex = index;
  		}
  		if(item.type=='down'){
  			this.curIndex = index;
  		}
  	},
  	navOut(item,index){
  		if(item.type=='more'){
  			this.curIndex = '';
  		}
  		if(item.type=='down'){
  			this.curIndex = '';
  		}
  	},
  	navMoreOver(mitem,mindex){
  		const {name,children} = mitem;
  		this.curMoreIndex = mindex;
  		this.curMoreData = children;
  	},
  	navMoreOut(mitem,mindex){},
  	languageOver(){
  		this.isLanguage = true;
  	},
  	languageOut(){
  		this.isLanguage = false;
  	},
  },
  created(){}
}
</script>

<style scoped>
@import url("../assets/css/components/nav.css");
</style>